jquery.serializeJSON: 将HTML表单序列化为JavaScript对象，支持嵌套属性和数组。

2024-05-14 16:28| 来源: 网络整理| 查看: 265

jquery.serializeJSON

将方法.serializeJSON()添加到jQuery（或Zepto）中，该方法将表单序列化为JavaScript对象，使用与默认rubyonrails请求参数相同的格式。

Install

使用bowerbower install jquery.serializeJSON，或npmnpm install jquery-serializejson安装，或者只下载jquery.serializejson.js脚本。

并确保jQuery后面包含它，例如：

Usage Example

HTML form:

JavaScript:

$('form').serializeJSON(); // returns => { title: "Finding Loot", author: { name: "John Smith", job: "Legendary Pirate" } }

支持表单输入、文本区域和选择标记。嵌套属性和数组可以使用attr[nested][nested]语法指定。

HTML form:

serializeJSON javascript tinytest.js javascript Paper Rock Scissors Red Blue Yellow

JavaScript:

$('#my-profile').serializeJSON(); // returns => { fullName: "Mario Izquierdo", address: { city: "San Francisco", state: { name: "California", abbr: "CA" } }, jobbies: ["code", "climbing"], projects: { '0': { name: "serializeJSON", language: "javascript", popular: "1" }, '1': { name: "tinytest.js", language: "javascript", popular: "0" } }, selectOne: "rock", selectMultiple: ["red", "blue"] }

serializeJSON函数返回一个JavaScript对象，而不是JSON字符串。这个插件应该被称为serializeObject或者类似的，但是那些插件已经存在了。

{274是所有浏览器上可用的一个新的@274方法。如果您需要支持非常旧的浏览器，只需包含json2.jspolyfill（如stackoverfow所述）。

var obj = $('form').serializeJSON(); var jsonString = JSON.stringify(obj);

插件实现依赖于jQuery的.serializeArray（）方法。这意味着它只序列化.serializeArray()支持的输入，它遵循W3C成功控制的标准规则。特别是，不能禁用包含的元素，并且必须包含name属性。没有序列化提交按钮值，因为表单不是使用按钮提交的。文件select元素中的数据未序列化。

分析值时使用：类型

字段值默认为字符串。但是可以通过在字段名后附加:type后缀来解析类型：

$('form').serializeJSON(); // returns => { "default": ":string is the default", "text": "some text string", // excluded:skip is ignored in the output "numbers": { "1": 1, "1.1": 1.1, "other": NaN, //

序列化包括未选中的值。在这种情况下不需要任何选项：

$('form#checkboxes').serializeJSON(); // Note no option is used // returns => { 'checked': { 'bool': 'true', 'bin': '1', 'cool': 'YUP' }, 'unchecked': { 'bool': 'false', 'bin': '0' // Note that unchecked cool does not appear, because it doesn't use data-unchecked-value } }

您可以同时使用选项checkboxUncheckedValue和属性data-unchecked-value，在这种情况下，属性优先于选项。请记住，您也可以将它与其他选项结合起来解析值。

$('form#checkboxes').serializeJSON({checkboxUncheckedValue: 'NOPE', parseBooleans: true, parseNumbers: true}); // returns => { 'checked': { 'bool': true, 'bin': 1, 'cool': 'YUP' }, 'unchecked': { 'bool': false, // value from data-unchecked-value attribute, and parsed with parseBooleans 'bin': 0, // value from data-unchecked-value attribute, and parsed with parseNumbers 'cool': 'NOPE' // value from checkboxUncheckedValue option } } Ignore Empty Form Fields

您可以使用.serializeJSON(skipFalsyValuesForTypes: ["string"])选项，该选项忽略任何具有空值的字符串字段（默认类型为：string，空字符串为falsy）。

另一个选项，因为serializeJSON()是在jQuery对象上调用的，所以只需使用适当的jQuery选择器来跳过空值（更多信息请参见第28期）：

// Select only imputs that have a non-empty value $('form :input[value!=""]').serializeJSON(); // Or filter them from the form obj = $('form').find('input').not('[value=""]').serializeJSON(); // For more complicated filtering, you can use a function obj = $form.find(':input').filter(function () { return $.trim(this.value).length > 0 }).serializeJSON(); Ignore Fields With Falsy Values

使用：types时，还可以通过使用skipFalsyValuesForFields: ["fullName", "address[city]"]或skipFalsyValuesForTypes: ["string", "null"]选项跳过虚假值（false, "", 0, null, undefined, NaN）。

或者在应该忽略的输入上设置一个数据属性data-skip-falsy="true"。注意，data-skip-falsy知道field:types，因此它知道如何跳过non-empty输入，比如（注意，"0"作为字符串不是falsy，而是0作为数字是falsy））。

使用整数键作为数组索引

默认情况下，所有序列化键都是字符串，这包括看起来像数字的键：

$('form').serializeJSON(); // arr is an object => {'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}

这就是机架parse_nested_query的行为方式。请记住，serializeJSON输入名称格式与Rails参数完全兼容，Rails参数是使用这个Rack方法解析的。

使用选项useIntKeysAsArrayIndex将整数解释为数组索引：

$('form').serializeJSON({useIntKeysAsArrayIndex: true}); // arr is an array => {'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}

注意：这是serializeJSON在版本2之前的默认行为。您可以使用此选项来实现向后兼容性。

Option Defaults

所有选项默认值都在$.serializeJSON.defaultOptions中定义。您只需修改它就可以避免在每次调用serializeJSON时设置该选项。例如：

$.serializeJSON.defaultOptions.checkboxUncheckedValue = ""; // include unckecked checkboxes as empty strings $.serializeJSON.defaultOptions.customTypes.foo = (str) => { return str + "-foo"; }; // define global custom type ":foo" Alternatives

其他插件以类似的方式解决相同的问题：

https://github.com/macek/jquery-serialize-object https://github.com/hongymagic/jQuery.serializeObject https://github.com/danheberden/jquery-serializeForm https://github.com/maxatwork/form2js（纯js，无jQuery） https://github.com/serbanghita/formToObject.js（纯js，无jQuery） https://gist.github.com/shiawuen/2634143（简单但小）

在serializeJSON被创建时，他们都没有做我需要的。区别serializeJSON和其他选择的因素：

简单而小的代码库。最小版本小于1Kb。但是，它具有足够的灵活性，比如嵌套对象，unchecked-checkboxes和自定义类型。在jQuery（或Zepto）serializeArray之上实现，它创建了一个JavaScript对象数组，可以被编码为JSON字符串。它考虑了W3C成功控制的规则，使serializeJSON尽可能地成为标准和稳定的。输入字段名称的格式与Rails使用的格式相同（来自机架：Utils.parse\u嵌套查询)，它已被许多后端系统成功使用，并已被许多前端开发人员充分理解。 Exaustive测试套件有助于自信地迭代新版本和错误修复。兼容bower、zepto.js和几乎所有版本的jQuery。 Contributions

伟大的贡献。功能分支请求是首选方法。只需确保为它添加测试。要运行jasmine规范，只需在浏览器中打开spec/spec_runner_jquery.html。

Changelog 3.0.0（2020年9月6日）：改进类型（PR#105）并删除解析选项（PR#104）。带有:type后缀、data-value-type属性和选项customTypes、disableSemicolonTypes和defaultType组合的类型系统比前面的选项parseNumbers、parseAll等更安全、更易于使用。感谢Laykou提出的[PR#102]建议，指出了名称中使用分号的输入问题。 2.9.0（2018年1月12日）：对customTypes.string函数的重写现在也适用于没有类型的字段，因为:string是默认的隐式类型。感谢JocaPC报告问题83。 2.8.1（2016年12月9日）：确定问题67，并抛出一个带有指向问题链接的描述性错误，这解释了为什么不支持带有未选中值的复选框的对象嵌套数组。 2.8.0（2016年12月9日）：添加选项skipFalsyValuesForFields、skipFalsyValuesForTypes和attrdata-skip-falsy以轻松跳过虚假值（包括空字符串）。多亏了米尔卡纳普。 2.7.2（2015年12月19日）：错误修正#55（允许data-value-type属性的数据类型在名称中使用括号）。多亏了斯特里特。 2.7.1（2015年12月12日）：错误修复54（data-value-type属性仅适用于输入元素）。多亏了马德拉巴兹。 2.7.0（2015年11月28日）：允许使用data-value-type属性定义自定义类型。多亏了马德拉巴兹。 2.6.2（2015年10月24日）：增加对AMD/CommonJS/Browserify模块的支持。多亏了吉萨克斯。 2.6.1（2015年5月13日）：Bugfix#43（Fix IE 8兼容性）。多亏了雷沃。 2.6.0（2015年4月24日）：允许使用选项customTypes定义自定义类型，并使用选项defaultTypes检查/覆盖默认类型。感谢提格里芬的请求。 2.5.0（2015年3月11日）：如果使用相同的名称（即使是嵌套值），则重写序列化属性，而不是使脚本崩溃，修复问题#29。还修复了使用Zepto和data-unchecked-value选项时的崩溃。 2.4.2（2015年2月4日）：忽略带有"data-unchecked-value"的禁用复选框。感谢skarr的请求。 2.4.1（2014年10月12日）：添加:auto类型，其工作方式类似于parseAll选项，但针对单个输入。 2.4.0（2014年10月12日）：实施：类型。类型允许轻松指定如何解析每个输入。 2.3.2（2014年10月11日）：错误修复27（对嵌套键的解析错误，如name=“foo[inn[bar]]”）。感谢丹洛发现了这个问题。 2.3.1（2014年10月6日）：错误修复22（在执行checkboxUncheckedValue时忽略没有名字的复选框）。感谢KATT发现并解决了这个问题。 2.3.0（2014年9月25日）：正确拼写"data-unckecked-value"，改为"data-unchecked-value” 2.2.0（2014年9月17日）：添加选项checkboxUncheckedValue和属性data-unckecked-value以允许解析未选中的复选框。 2.1.0（2014年6月8日）：添加选项parseWithFunction以允许自定义解析器。并修复问题14：当parseNumbers选项为true时，空字符串被解析为零。 2.0.0（2014年5月4日）：默认情况下，嵌套键始终是对象属性（第12期讨论）。设置选项$.serializeJSON.defaultOptions.useIntKeysAsArrayIndex = true;以获得向后兼容性（请参阅选项部分）。感谢乔舒雅伯发现了这个问题。 1.3.0（2014年5月3日）：接受选项{parseBooleans、parseNumbers、parseNulls、parseAll}来修改从字符串中解释的值的类型。感谢diaswrd发现了这个问题。 1.2.3（2014年4月12日）：小写文件名。 1.2.2（2014年4月3日）：现在还与泽普托.js. 1.2.1（2014年3月17日）：重构、清理、lint代码并提高测试覆盖率。 1.2.0（2014年3月11日）：索引为空的数组和值为空的对象将被添加而不被重写。多亏了科塔斯。 1.1.1（2014年2月16日）：只有无符号整数用于创建数组。字母数字键总是用于对象。多亏了烟碱。 1.0.2（2014年1月7日）：标记在jQuery插件注册表中。 1.0.1（2012年8月20日）：错误修复：确保在使用JSON.stringify解析时显示生成的数组 1.0.0（2012年8月20日）：初始版本 Author

由Mario Izquierdo编写和维护

【本文地址】

公司简介

联系我们